<template>
	<div class="trainPassenger train" :class="{'acitve':!isLogin}">
		<div class="trainPassenger_header">
			<trainHeader name="选择乘客" btn="确定" @btnClick="sublime"></trainHeader>
			<div class="trainPassenger_add" @click="operatePassenger()">
				<img src="http://h5.kpcx179.com/wximages/train/tianjia@2x.png" alt="" />
				<span>添加常用乘客</span>
			</div>
		</div>
		<div class="trainPassenger_header_zhan"></div>
		<!--乘客信息-->
		<template v-if="passengerArr.length">
			<div v-for="item,index in passengerArr" class="trainPassenger_box" @click="chose(index)">
				<img src="http://h5.kpcx179.com/wximages/train/kuang-xuanzhong@2x.png" alt="" class="trainPassenger_chose" v-if="item.flag" />
				<img src="http://h5.kpcx179.com/wximages/train/kuang-weixuan@2x.png" alt="" class="trainPassenger_chose" v-else/>
				<div>
					<div class="trainPassenger_name">
						<span>{{item.name}}</span>
						<em v-if="item.passengerType == 1">成人</em>
						<em v-if="item.passengerType == 2">儿童</em>
						<em v-if="item.passengerType == 3">学生</em>
					</div>
					<template v-if="item.nullMessage">
						<div class="trainPassenger_cert">
							<span v-if="item.kpcxcertnO[0].certTypeNum == 1">
								身份证：
							</span>
							<span v-else-if="item.kpcxcertnO[0].certTypeNum == 2">
								护照：
							</span>
							<span v-else-if="item.kpcxcertnO[0].certTypeNum == 8">
								台胞证：
							</span>
							<span v-else-if="item.kpcxcertnO[0].certTypeNum == 4">
								港澳通行证：
							</span>
							<span>
								{{item.kpcxcertnO[0].certNo | getNum}}
							</span>
						</div>
					</template>
					<div class="trainPassenger_all" v-else>
						添加用户信息
					</div>
				</div>
				<p class="trainPassenger_change" @click.stop="operatePassenger(item)">
					<img src="http://h5.kpcx179.com/wximages/train/bianji@2x.png" alt="">	
				</p>
			</div>
		</template>
		<div v-else class="trainPassenger_null">
			啊哦，你还没有添加乘客哦
		</div>
		<!--12306登录-->
		<div class="trainPassenger_login" @click="trainLogin" v-if="!isLogin">
			登录12306购票
		</div>
	</div>
</template>
<style scoped>
	.trainPassenger.acitve {
		padding-bottom: 110px;
	}
	
	.trainPassenger_header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #F4F5F9;
	}
	
	.trainPassenger_header_zhan {
		height: 200px;
	}
	
	.trainPassenger_add {
		width: 100%;
		height: 88px;
		font-size: 32px;
		color: #3bc3c2;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		margin-top: 18px;
	}
	
	.trainPassenger_add>img {
		width: 36px;
		height: 36px;
		margin-right: 14px;
	}
	
	.trainPassenger_login {
		width: 100%;
		height: 95px;
		background-color: #3bc3c2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36px;
		color: #fefefe;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.trainPassenger_null {
		font-size: 32px;
		color: #b5b5b5;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 460px;
	}
	
	.trainPassenger_box {
		height: 135px;
		padding: 0 30px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	
	.trainPassenger_box>div {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 25px 36px;
		box-sizing: border-box;
	}
	
	.trainPassenger_chose {
		width: 44px;
		height: 40px;
	}
	
	.trainPassenger_change {
		width: 40px;
		height: 40px;
	}
	
	.trainPassenger_change > img {
		width: 100%;
		height: 100%;
	}
	
	.trainPassenger_name {
		font-size: 30px;
		color: #a8a8a8;
	}
	
	.trainPassenger_name>span {
		font-size: 32px;
		color: #333333;
	}
	
	.trainPassenger_cert {
		font-size: 28px;
		color: #a8a8a8;
	}
	
	.trainPassenger_all {
		font-size: 28px;
		color: #3bc3c2;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import trainChooseSeat from "./trainChooseSeat.js"; //选座处理
	export default {
		name: "reserve",
		data() { //数据
			return {
				isLogin: false, //是否登录12306
				passengerList: [], //选中的乘客列表
				studentTicketFlag: false, //学生购票区间
				ticketType: 0, //车次性质 0普通 1抢票
				passengerArr: [], //乘客列表
			}
		},
		mounted() {
			if(this.$store.state.train.trainStore.trainPassenger) { ///页面切换
				var trainPassenger = JSON.parse(JSON.stringify(this.$store.state.train.trainStore.trainPassenger));
				Object.keys(trainPassenger).forEach(i => { //页面信息存储使用
					this[i] = trainPassenger[i];
				}, this);
			} else { //首次进入
				this.isLogin = Number(this.$route.query.isLogin); //登录
				this.studentTicketFlag = Number(this.$route.query.studentTicketFlag); //学生票区间
				this.ticketType = this.$route.query.ticketType; //车次性质
				this.$route.query.passengerList && (this.passengerList = JSON.parse(this.$route.query.passengerList)); //选中乘客
			};
			this.getPassengerArr(); //获取乘客列表
		},
		created() {
			//console.log(this.$route.query);
			
		},
		methods: {
			sublime() { //提交乘客
				//判断是否都为儿童
				var people = 0; //计数
				var children = 0;
				this.passengerList.forEach((val) => {
					(val.passengerType == "2") && (children++);
					(val.passengerType == "1") && (people++);
				});
				children ? people ? this.next(children) : this.$toast(res.data.msg, {
					durtaion: 200,
					location: 'center',
				}) : this.next(children);
			},
			next(children) {
				if(children) { //将儿童的身份证改为大人的 (处理儿童乘客)
					var obj = {}; //获取第一个大人的身份证
					for(var i = 0; i < this.passengerList.length; i++) {
						if(this.passengerList[i].passengerType == "1") {
							obj = this.passengerList[i];
							break;
						}
					};
					this.passengerList.forEach((val, key) => {
						if(val.passengerType == "2" && (val.contactsid != obj.contactsid)) { //儿童
							var child = JSON.stringify(obj); //拷贝
							child = JSON.parse(child);
							child.passengerType = '2'; //修改类型
							child.name = val.name; //修改名字
							this.passengerList[key] = child; //赋值
						}
					},this);
				};
				//重置选座
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				var seatName = trainStore.fillOrder.seatMessage.seatName || trainStore.fillOrder.seatMessage.cn;
				trainStore.fillOrder.chooseSeatClass = JSON.parse(JSON.stringify(trainChooseSeat.filtrate(seatName)));//选座渲染数据
				trainStore.fillOrder.chooseSeatClass.num = 0; //计数器归0
				trainStore.fillOrder.chooseSeatClass.flag = false; //防止重复调用
				trainStore.fillOrder.chooseSeatClass.seat = []; //选中的座位清空
				//重置优惠券
				trainStore.fillOrder.coupon.name = "";
				trainStore.fillOrder.coupon.price = 0;
				trainStore.fillOrder.coupon.id = "";
//				//重置保险
//				trainStore.fillOrder.insurance.name = "";
//				trainStore.fillOrder.insurance.price = 0;
//				trainStore.fillOrder.insurance.highestPrice = 0;
//				trainStore.fillOrder.insurance.id = "";
				//乘客
				trainStore.fillOrder.passengerList = this.passengerList;
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
			getPassengerArr() { //获取乘客列表
				this.$loading.show();
				var param = {
					userID: this.$store.state.common.userinfo.userID,
					orderType: (this.ticketType == 1) ? "7" : "3",
				};
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appContacts/findAll", param).then((res) => {
					this.$loading.hide();
					//console.log(res);
					if(res.data.Code == "0") {
						res.data.Result.ContactsList.forEach((val, key) => {
							res.data.Result.ContactsList[key].flag = false; //是否选中
							val.kpcxcertnO.sort((a, b) => { //证件顺序整理
								return Number(a.certType) - Number(b.certType)
							});
							res.data.Result.ContactsList[key].nullMessage = true; //判断证件
							(val.kpcxcertnO.length) || (res.data.Result.ContactsList[key].nullMessage = false); //没有证件的
							if(val.passengerType == "3") { //学生
								((val.kpcxcertnO.length == 1) && (val.kpcxcertnO[0].certType == "101")) && (res.data.Result.ContactsList[key].nullMessage = false); //只有学生证
								var studentCodeFlag = false;
								val.kpcxcertnO.forEach((item) => { //是学生没有学生证的
									(item.certType == "101") && (studentCodeFlag = true);
								});
								studentCodeFlag || (res.data.Result.ContactsList[key].nullMessage = false);
							};
							val.kpcxcertnO.forEach((item, index) => { //处理抢票certType不同的情况
								val.kpcxcertnO[index].certTypeNum = (this.ticketType == 1) ? (Number(val.kpcxcertnO[index].certType) + 1) : Number(val.kpcxcertnO[index].certType);
							}, this);
						});
						res.data.Result.ContactsList.forEach((val, key) => { //判断选中
							this.passengerList.forEach((item) => {
								(val.Contactsid == item.Contactsid) && (res.data.Result.ContactsList[key].flag = true);
							});
						}, this);
						this.passengerArr = res.data.Result.ContactsList; //联系人列表
						//console.log(this.passengerArr);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			trainLogin() { //登录12306
				this.$router.push({
					name: "trainLogin"
				});
			},
			chose(index) { //选择乘客
				var item = this.passengerArr[index];
				if(item.nullMessage) { //有证件
					var key = null;
					var studentNum = 0; //学生人数
					var adultNum = 0; //成人人数
					this.passengerList.forEach((val, num) => { //计算成人学生数
						(val.Contactsid == item.Contactsid) && (key = num); //存在存一下key
						(val.passengerType == 1) && (adultNum++);
						(val.passengerType == 3) && (studentNum++);
					});
					if(item.flag) { //删除乘客
						this.passengerList.splice(key, 1);
						item.flag = false;
						var arr = []; //处理删除大人的同时去掉儿童的情况
						this.passengerList.forEach((val) => {
							(val.Contactsid == item.Contactsid) || arr.push(val);
						});
						this.passengerList = arr;
					} else { //添加乘客
						if(this.passengerList.length == 5) { //乘客上限
							this.$toast("最多可以选5位乘客", {
								durtaion: 200,
								location: 'center',
							});
						} else {
							if(item.passengerType == 3) { //学生票
								if(this.studentTicketFlag) { //区间内
									if(adultNum) { //有成人
										this.$toast("学生票可售卖时间段内，成人和学生不能一起购买", {
											durtaion: 500,
											location: 'center',
										});
									} else {
										if(this.ticketType == 1) { //抢票学生变成人
											this.$confirm('抢票暂不支持学生票,如选择学生乘客类型将以成人票价出售', {
												title: '温馨提示',
												yes: {},
												no: {},
											}).then(() => {
												item.flag = true;
												var val = JSON.parse(JSON.stringify(item)); //备份原来
												val.passengerTypeBei = val.passengerType;
												val.passengerType = 1;
												this.passengerList.push(val);
											}).catch(() => {});
										} else { //普通给提示
											this.$confirm('您是要购买学生票吗(须凭购买时所用的有效身份证原件和附有学生火车票优惠卡的有效学生证原件换票乘车，详见购买学生票的相关规定。如不符合规定，请点击"取消"。)', {
												title: '提示',
												yes: {},
												no: {},
											}).then(() => {
												item.flag = true;
												this.passengerList.push(item);
											}).catch(() => {});
										};
									};
								} else { //区间外
									this.$toast("学生票的乘车时间为每年的暑假6月1日至9月30日，寒假12月1日至3月31日,目前不办理学生票业务", {
										durtaion: 2000,
										location: 'center',
									});
								};
							} else { //成人
								if(this.studentTicketFlag && studentNum) { //期间内有学生
									this.$toast("学生票可售卖时间段内，成人和学生不能一起购买", {
										durtaion: 500,
										location: 'center',
									});
								} else { //正常添加
									item.flag = true;
									this.passengerList.push(item);
								};
							};
						};
					};
				} else { //无证件
					this.operatePassenger(item);
				};
			},
			operatePassenger(item) { //操作乘客
				if(item) {
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					trainStore.operatePassengerItem = item;
					this.$store.commit('TRAINSTORE', trainStore);
				};
				this.$router.push({
					name: "operatePassenger",
//					query: {
//						item: item ? JSON.stringify(item) : "",
//					}
				});
			},
		},
		beforeRouteLeave(to, from, next) {
			var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
			(to.name == "fillOrder") ? (trainStore.trainPassenger = null) : (trainStore.trainPassenger = this._data);
			this.$store.commit('TRAINSTORE', trainStore);
			next();
		},
		filters: {
			getNum(num) { //证件号加密
				(typeof num == "String") || (num = String(num));
				var length = num.length;
				var str = "";
				for(var i = 0; i < length - 2; i++) {
					str += "*"
				};
				return num.substring(0, 1) + str + num.substring(num.length - 1, num.length);
			},
		},
		components: {
			trainHeader
		},
	};
</script>